.<template>
  <div class="status">
    <div class="statusT">
      <p @click="user">
        <img src="../assets/leftl.png" />
      </p>
      <p>身份认证</p>
      <p></p>
    </div>
    <div class="realname ajc">
      <img src="../assets/realname.png" />
    </div>
    <div class="camera">
      <div class="ajc">便于审核通过，请务必提供清晰身份拍照，确保人脸识别无误</div>
      <div class="ac">
        <p>身份证拍照</p>
        <div v-if="fileList.length===0">
          <van-uploader v-model="fileList">
            <img src="../assets/camera.png" />
          </van-uploader>
        </div>
        <div class="user-sfz" v-else>
          <img :src="fileList[0].content" alt="">
        </div>
      </div>
      <div class="ac">
        <p>人脸识别</p>
        <div v-if="fileList1.length===0">
          <van-uploader v-model="fileList1">
            <img src="../assets/code.png" />
          </van-uploader>
        </div>
        <div class="user-sfz" v-else>
          <img :src="fileList1[0].content" alt="">
        </div>
      </div>
    </div>
    <div class="realnameInfo">
      <p>
        <span>姓名</span>
        <span>
          <input v-model="name" type="text" placeholder="请输入您的真实姓名" />
        </span>
      </p>
      <p>
        <span>身份证</span>
        <span>
          <input v-model="card" type="tel" maxlength="18" placeholder="请输入您的身份证号码" />
        </span>
      </p>
    </div>
    <div class="sureInfo">
      <p @click="submitInfo">确认提交</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      fileList1: [],
      name: null,
      card: null
    };
  },
  created() {
    this.$parent.showTabbar = false;
  },
  methods: {
    user() {
      this.$router.push("user");
    },
    submitInfo() {
      this.$axios({
        url: 'realname/authentication?id_number=' + this.card + '&name=' + this.name + '&id_just=' + this.fileList[0].file + '&id_back=' + this.fileList1[0].file,
        method: 'post'
      }).then(res => {
        if (res.data.code === 200) {
          this.$toast('提交成功！')
        }
      })
    }
  }
};
</script>

<style lang='less'>
.statusT {
  padding: 10px 0;
  display: flex;
  background: linear-gradient(0deg, #e91a0e 0%, #f54822 100%),
    linear-gradient(0deg, #e40805 0%, #e40a07 100%);
  p {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  p:nth-child(1),
  p:nth-child(3) {
    width: 10%;
    img {
      width: 29%;
    }
  }
  p:nth-child(2) {
    width: 80%;
    color: #ffffff;
    font-size: 16px;
  }
}
.realname {
  background: #fff;
  padding: 10px 0;
  img {
    height: 5rem;
  }
}

.camera {
  background: #fff;
  margin-top: 10px;
  padding-bottom: 10px;
  .user-sfz{
    img{
      width: 70%;
      height: 80px;
    }
  }
  >div:not(:first-child){
    height: 130px;
  }
  div:nth-child(1) {
    font-size: 13px;
    color: grey;
    border-bottom: 1px solid #f9f9f9;
    padding: 8px 0;
  }
  div:nth-child(2),
  div:nth-child(3) {
    display: flex;
    width: 93%;
    margin: 0 auto;
    padding: 5px 0;
    border-bottom: 1px solid #f9f9f9;
    p:first-child {
      //   font-weight: 550;
      font-size: 17px;
      width: 35%;
    }
    .ac{
      text-align: center;
      width: 75%;
    }
    p:nth-child(2) {
      text-align: center;
      width: 75%;
    }
  }
}
.realnameInfo {
  margin-top: 10px;
  background: #fff;
  padding: 0 13px;
  p:nth-child(1) {
    border-bottom: 1px solid #f9f9f9;
  }
  p {
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    span:nth-child(1) {
      font-size: 17px;
      width: 15%;
    }
    span:nth-child(2) {
      display: flex;
      width: 58.3%;
      input {
        width: 100%;
        border: 0;
        outline: 0;
      }
    }
  }
}
.sureInfo {
  width: 85%;
  margin: 0 auto;
  margin-top: 20px;
  p {
    text-align: center;
    background: linear-gradient(170deg, #ea1e10 0%, #f54722 100%);
    padding: 15px;
    border-radius: 25px;
    font-size: 17px;
    color: #fff;
  }
}
</style>